import './style.scss'
import React, { useEffect } from 'react'
import { Ellipsis } from 'antd-mobile'
import { useSelector, useDispatch } from 'react-redux'
import { requestTopicData } from "./reducer";


export default function Root() {
  // 获取redux仓库中的数据
  const state = useSelector(state => ({
    list: state.topic.data,
    loading: state.topic.loading,
  }))

  // 获取dispatch
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(requestTopicData());
  }, [dispatch])

  return (
    <div className="page" id="topic">
      <ul>
        {
          state.list.map((item, index) => (
            <li key={index}>
              <img src={item.scene_pic_url} alt="" />
              <h3>{item.title}</h3>
              <Ellipsis direction='end' content={item.subtitle} />
              <p>{item.price_info}起</p>
            </li>
          ))
        }

      </ul>
    </div>
  )
}
